import {inject, observer} from "mobx-react";
import { Input, Button, Menu, Icon, Spin, Popover, message, Modal, Pagination  } from 'antd';
const InputGroup = Input.Group;
const SubMenu = Menu.SubMenu;
const confirm = Modal.confirm;
import { WeaLoadingGlobal, WeaTools, WeaDialog } from 'ecCom';


@inject("demoTestStore")
@observer
class TabDemo extends React.Component {
  
  state = {
    selectMenu: 0,
    keyword: "",
    current: ['sub1'],
    openKeys: ['sub1'],
    demoList: [],
    hyList: [],
    cpList: [],
    loading: false,
    isAdd: false,
    visible: false,
    isShowImg: false,
    cjval: '',
    cjList:[
      {
        name: '	数字化运营',
        data: [
          {
          "name":"合同管理",
          "id":"29"
          },
          {
          "name":"营销管理",
          "id":"39"
          },
          {
          "name":"项目管理",
          "id":"30"
          },
          {
          "name":"费控管理",
          "id":"28"
          },
          {
          "name":"采购管理",
          "id":"24"
          },
          {
          "name":"知识管理",
          "id":"22"
          },
          {
          "name":"人事管理",
          "id":"11"
          },
          {
          "name":"数据中心",
          "id":"32"
          },
          {
          "name":"档案管理",
          "id":"5"
          },
          {
          "name":"客服管理",
          "id":"8"
          },
        ]
      },
      {
        name: '	数字化办公',
        data: [
          {
          "name":"公文管理",
          "id":"12"
          },
          {
          "name":"督查督办",
          "id":"20"
          },
          {
          "name":"会议管理",
          "id":"49"
          },
          {
          "name":"资产管理",
          "id":"18"
          },
          {
          "name":"证照管理",
          "id":"23"
          },
          {
          "name":"党建管理",
          "id":"21"
          },
          {
          "name":"三重一大",
          "id":"9"
          },
          {
          "name":"法务管理",
          "id":"7"
          },
        ]
      },
      {
        name: '其他场景	',
        data: [
          {
          "name":"工程项目",
          "id":"14"
          },
          {
          "name":"一网通办",
          "id":"13"
          },
          {
          "name":"科研项目",
          "id":"6"
          },
          {
          "name":"风控管理",
          "id":"25"
          },
          {
          "name":"投资项目",
          "id":"26"
          },
          {
          "name":"审计管理",
          "id":"46"
          },
          {
          "name":"安全管理",
          "id":"34"
          },
          {
          "name":"一站式服务",
          "id":"37"
          },
          {
          "name":"经销商管理",
          "id":"38"
          },
          {
          "name":"工时管理",
          "id":"31"
          },
          {
          "name":"教学管理",
          "id":"45"
          },
          {
            "name":"制度管理",
            "id":"51"
          },
          {
            "name":"工会管理",
            "id":"53"
          }
        ]
      }
    ],
    activeTab: 0,
    activeTab1: 0,
    
    category1: 0,
    category2: 0,
    category3: 0,
    category4: 0,
    category5: 0,
    category6: 0,
    applyList: [],
    yzyxqList: [],
    showYzyType: '',
    currentPage: 1,
    iTotal: 0
  }

  componentDidMount() {
    document.title = '演示中心'
		this.getList();
    this.getMenuList()
    this.getQuanxian()

    $("#search").keydown((e) => {
      if (e.keyCode == 13){
        this.getList();
      }
    })

    this.getPOCptdata()
    this.getALdata()
  }

  // 查看是否有添加权限
  getQuanxian () {
    const URL = '/api/cube/search/init?customid=2361&guid=search';
		WeaTools.callApi(URL, 'GET')
      .then(( { rightMenus } ) => {
        if (rightMenus && rightMenus.length) {
          rightMenus.forEach((item) => {
            if (item.function == "Add") {
              this.setState({ isAdd: true })
            }
          })
        }
      })
  }

  getList() {
    WeaLoadingGlobal.start()
    this.setState({ isShowImg: false, loading: true})
    const { selectMenu, keyword, current, hyval, cjval } = this.state;
    const URL = '/plugin/demoDev/demoCenter/demoCenter_v1.jsp';
    var param = {
      operation: 'search',
      tableid: '2494',
      dname: keyword,
      mval: selectMenu,
      cjval: cjval,
      hyval: hyval,
      cpval: ''
    }
		WeaTools.callApi(URL, 'GET', param)
      .then(( {list} ) => {
        list.forEach((item) => {
          item.bqList = item.bqList.slice(0,3)
        })
        console.log(list)
        this.setState({ demoList: list, isShowImg: true, loading: false })
        WeaLoadingGlobal.end()
        WeaLoadingGlobal.destroy()
      }).catch(err => {
        this.setState({ loading: false })
        WeaLoadingGlobal.end()
        WeaLoadingGlobal.destroy()
      })
  }

  getMenuList() {
    const URL = '/plugin/demoDev/demoCenter/demoCenter_v1.jsp?operation=getTab';
		WeaTools.callApi(URL, 'GET')
      .then(( {datas} ) => {
        this.setState({ hyList: datas.hyList, cpList: datas.cpList })
      })
  }

  selectMenus (data) {
    this.setState({
      keyword: '',
      cjval: '',
      hyval: '',
      activeTab: 0,
      activeTab1: 0,
      selectMenu: data,
    }, () => {
      this.getList();
    })
  }

  handleInputChange(v) {
    this.setState({
      keyword: v,
    });
  }

  handleSearch () {
    setTimeout(() => {
      this.getList();
    })
  }

  leadTo (data) {
    const URL = '/plugin/demoDev/demoCenter/demoCenter_v1.jsp';
    var param = {
      operation: 'log',
      type: 0,
      demoid: data.id,
      demoname: data.demoname
    }
		WeaTools.callApi(URL, 'GET', param)
      .then(( data ) => {
        
      })
    
    let href = window.location.href + ''
    if (data.demotype == '5') {
      href = href.replace('home', `pocdetail`)
      if(href.indexOf('?') > -1) {
        href += `&id=${data.id}`
      } else {
        href += `?id=${data.id}`
      }
    } else {
      href = href.replace('home', `detail`)
      if(href.indexOf('?') > -1) {
        href += `&id=${data.id}`
      } else {
        href += `?id=${data.id}`
      }
    }
    window.open(href)
  }

  opentyUrl(event, url, data) {
    event.stopPropagation();
    const URL = '/plugin/demoDev/demoCenter/demoCenter_v1.jsp';
    var param = {
      operation: 'log',
      type: 1,
      demoid: data.id,
      demoname: data.demoname
    }
		WeaTools.callApi(URL, 'GET', param)
      .then(( data ) => {
        
      })


    const URL1 = '/plugin/demoDev/demoCenter/demoCenter_v1.jsp';
    var param = {
      operation: 'login',
      demoId: data.id,
      demoType: data.sffb ? 1 : 2
    }
    WeaTools.callApi(URL1, 'GET', param)
      .then(( data ) => {
        window.open(data.url)
      }) 
  }

  opentyUrl1(event, url, data, demoType) {
    event.stopPropagation();
    const URL = '/plugin/demoDev/demoCenter/demoCenter_v1.jsp';
    var param = {
      operation: 'log',
      type: 1,
      demoid: data.id,
      demoname: data.demoname
    }
		WeaTools.callApi(URL, 'GET', param)
      .then(( data ) => {
        
      })


    const URL1 = '/plugin/demoDev/demoCenter/demoCenter_v1.jsp';
    var param = {
      operation: 'login',
      demoId: data.id,
      demoType
    }
    WeaTools.callApi(URL1, 'GET', param)
      .then(( data ) => {
        window.open(data.url)
      }) 
  }

  openNewUrl(event, url, data) {
    event.stopPropagation();
    window.open(url)
  }

  handleClick(e) {
    var { current } = this.state;
    if (current.indexOf(e.key) > 0) {
      current.splice(current.indexOf(e.key), 1)
    } else {
      current = [...current, e.key]
    }
    this.setState({
      current: [e.key],
      openKeys: e.keyPath.slice(1),
    });
    setTimeout(() => {
      this.getList();
    })
  }
  onToggle(info) {
    this.setState({
      openKeys: info.open ? info.keyPath : info.keyPath.slice(1),
    });
  }

  chooseHy(data) {
    document.querySelector('.menu-detail').style.transition = ''
    document.querySelector('.menu-detail').style.height = 0
    const { hyval } = this.state;
    this.setState({
      hyval: data.id == hyval ? '' : data.id,
      activeTab1: data.id == hyval ? 0 : 1,
    }, () => {
      this.getList();
    });
  }

  chooseCj(data) {
    document.querySelector('.menu-detail').style.transition = ''
    document.querySelector('.menu-detail').style.height = 0
    const { cjval } = this.state;
    this.setState({
      cjval: data.id == cjval ? '' : data.id,
      activeTab: data.id == cjval ? 0 : 1
    }, () => {
      this.getList();
    });
  } 
 
  aa() {
    this.setState({
      activeMenu: 2,
      activeTab: 0,
      activeTab1: 1
    })
    document.querySelector('.menu-detail').style.transition = 'all 0.3s ease-in-out'
    document.querySelector('.menu-detail').style.height = '296px'
    document.querySelector('#sy .menu').style.borderRadius = 0
  }

  bb() {
    const { cjval, hyval } = this.state;
    if (!cjval) {
      this.setState({
        activeTab: 0,
      })
    }
     if (!hyval) {
      this.setState({
        activeTab1: 0
      })
    }
    this.setState({
      activeMenu: 0 
    })
    document.querySelector('.menu-detail').style.transition = ''
    document.querySelector('.menu-detail').style.height = 0
    document.querySelector('#sy .menu').style.borderRadius = '0 0 20px 20px'
  }

  cc() {
    this.setState({
      activeMenu: 1,
      activeTab: 1,
      activeTab1: 0
    })
    document.querySelector('.menu-detail').style.transition = 'all 0.3s ease-in-out'
    document.querySelector('.menu-detail').style.height = '296px'
    document.querySelector('#sy .menu').style.borderRadius = 0
  }
  changePopver() {

  }
  openqll() {
    window.open('https://www.e-cology.com.cn/sp/integration/loginSingle?appId=ef355d7f56a9438582505bdedea5e13d')
  }

  xqpg() {
    confirm({
      title: 'DEMO需求评估',
      content: '是否发送需求评估提醒？选择发送，我将主动在EM与您联系。',
      onOk() {
        // let obj = {loginid:"guoaijin",lastname:"郭艾进",mobile:"18852953323",userid:"732850119462756354"}
        let obj = JSON.parse(sessionStorage.getItem('ec-userInfo'))
        if(obj) {
          const URL1 = `/plugin/demoDev/demoCenter/sendEMMsg.jsp?userid=${obj.userid}&lastname=${obj.lastname}&loginid=${obj.loginid}`;
          WeaTools.callApi(URL1, 'GET')
            .then(( data ) => {
              if(data.status == '1') {
                message.success('发送成功');
              } else {
                message.error('服务异常，请直接联系产品方案部-方烨良');
              }
            })
        }
      },
      onCancel() {},
    });
  }

  getPOCptdata() {
    let obj = JSON.parse(sessionStorage.getItem('ec-userInfo'))|| { userid: '-1' }
    const URL = `/plugin/demoDev/demoCenter/demoCenter_v1.jsp?operation=getCloudData&userid=${obj.userid}`;
		WeaTools.callApi(URL, 'GET')
      .then((data) => {
        if(data.cloudNum) {
          data.cloudNum.forEach((item) => {
            let str = 'category' + item.category
            let obj = {}
            obj[str] = item.num
            this.setState(obj)
          })
        }
        if(data.applyList) {
          let arr = data.applyList
          this.setState({ applyList: data.applyList })
          let i = 1
          let k = 1
          if(data.applyList.length > 3) {
            setInterval(() => {
              if(k == arr.length - 3) {
                arr = [...arr, ...data.applyList]
                this.setState({ applyList: arr })
              }
              $('.xq .cell').css({ bottom : `${31 * i}px`})
              i++
              k++
            }, 3000)
            // applyList
          }
        }
      }).catch(err => {
        console.log('--------', err)
      })
  }

  getALdata() {
    WeaLoadingGlobal.start()
    const { showYzyType, currentPage } = this.state;
    let obj = JSON.parse(sessionStorage.getItem('ec-userInfo')) || { userid: '-1' }
    const URL = `/plugin/demoDev/demoCenter/demoCenter_v1.jsp?operation=getApplyList&userid=${obj.userid}&type=${showYzyType}&pageNum=${currentPage}`;
		WeaTools.callApi(URL, 'GET')
      .then((data) => {
        this.setState({
          yzyxqList: data.data,
          iTotal: data.iTotal
        })
        // console.log(data)
        WeaLoadingGlobal.end()
        WeaLoadingGlobal.destroy()
      }).catch(err => {
        console.log('--------', err)
        WeaLoadingGlobal.end()
        WeaLoadingGlobal.destroy()
      })
  }

  poczc() {
    confirm({
      title: 'POC支持',
      content: '是否需要POC支持？点击确定，我将主动在EM与您联系。',
      onOk() {
        // let obj = {loginid:"guoaijin",lastname:"郭艾进",mobile:"18852953323",userid:"732850119462756354"}
        let obj = JSON.parse(sessionStorage.getItem('ec-userInfo'))
        if(obj) {
          const URL1 = `/plugin/demoDev/demoCenter/sendEMMsg.jsp?userid=${obj.userid}&lastname=${obj.lastname}&loginid=${obj.loginid}`;
          WeaTools.callApi(URL1, 'GET')
            .then(( data ) => {
              if(data.status == '1') {
                message.success('发送成功');
              } else {
                message.error('服务异常，请直接联系产品方案部-方烨良');
              }
            })
        }
      },
      onCancel() {},
    });
  }

  chooseYzyType(i) {
    this.setState({
      currentPage: 1,
      showYzyType: i
    }, () => {
      this.getALdata()
    })
  }

  onPageChange(i) {
    this.setState({
      currentPage: i
    }, () => {
      this.getALdata()
    })
  }
 
  render() {
    const { selectMenu, keyword, current, openKeys, demoList, cjList, hyList, cpList, visible, isAdd, isShowImg, hyval, cjval, activeMenu, activeTab, activeTab1, category1, category2, category3, category4, category5, category6, applyList, yzyxqList, showYzyType, iTotal, currentPage } = this.state;
    const typeList = ['' ,'正在使用', '已到期', '即将释放', '已释放']
    return (
      <div id="sy">
        <div className="header">
          <div className="header-left">
            <img src={require('../imgs/logo.png')} />
            <ul>
              <li className={`${selectMenu == 0 ? 'active-menu' : ''}` } onClick={ () => this.selectMenus(0) }>全部{ selectMenu == 0 ? <div></div> : ''}</li>
              <li className={`${selectMenu == 1 ? 'active-menu' : ''}` } onClick={ () => this.selectMenus(1) }>DEMO演示中心{ selectMenu == 1 ? <div></div> : ''}</li>
              <li className={`${selectMenu == 2 ? 'active-menu' : ''}` } onClick={ () => this.selectMenus(2) }>POC共享中心{ selectMenu == 2 ? <div></div> : ''}</li>
              <li className={`${selectMenu == 3 ? 'active-menu' : ''}` } onClick={ () => this.selectMenus(3) } style={{ display: 'flex', alignItems: 'center'}}>POC自助平台{ selectMenu == 3 ? <div></div> : ''}
                <img src={require('../imgs/new.png')} style={{ width: '30px', margin: '0 0 0 8px'}} />
              </li>
            </ul>
          </div>
          <div className="header-right">
            <div className="ss">
              <Input id="search" placeholder="输入标题或标签进行搜索" value={ keyword } onChange={ (e) => this.handleInputChange(e.target.value) } />
              <img onClick={ () => this.handleSearch() } src={require('../imgs/search.png')} />
            </div>
            <div className="xq" onClick={ () => this.xqpg() }>
              <img src={require('../imgs/xqfx.png')} />
              <span>DEMO需求评估</span>
            </div>
            <div className="yun" onClick={ () => {
              window.open('https://www.e-cology.com.cn/spa/workflow/static4form/index.html#/main/workflow/req?iscreate=1&workflowid=2159')
              } }>
              <img src={require('../imgs/yun.png')} />
              <span>云资源申请</span>
            </div>
          </div>
        </div>
        <div className="topbg" style={{ display: selectMenu == 0 || selectMenu == 1 || selectMenu == 2 ? 'block' : 'none', backgroundImage: 'url(' + require('../imgs/topbg1.png') + ')' }}>
        <img style={{ width: '100%', visibility: 'hidden' }} src={require('../imgs/banner2.png')} />
          <div className="topbg-con">
            <img src={require('../imgs/banner2.png')} />
            <img src={require('../imgs/banner3.png')} />
            <img src={require('../imgs/banner1.png')} />
          </div>
        </div>
        <div className="menu" style={{ display: selectMenu == 0 || selectMenu == 1 || selectMenu == 2 ? 'block' : 'none' }} onMouseLeave={() => this.bb()}>
          <div className="menu-list">
            <div className={activeTab == 1 ? 'active-menu-tab cj-menu':'cj-menu'}  onMouseEnter={() => this.cc()}>
              <img className="cj" src={require('../imgs/cj.png')} />
              <img className="cjactive" src={require('../imgs/cjactive.png')} />
              <span className="menu-name">应用场景</span>
              <Icon type="caret-down" />
              <Icon type="caret-up" />
            </div>
            <div className={activeTab1 == 1 ? 'active-menu-tab cj-menu':'cj-menu'} onMouseEnter={() => this.aa()}>
              <img className="cj" src={require('../imgs/hy.png')} />
              <img className="cjactive" src={require('../imgs/hyactive.png')} />
              <span className="menu-name">行业类型</span>
              <Icon type="caret-down" />
              <Icon type="caret-up" />
            </div>
            <div className="menu-detail">
              {
                activeMenu == 1 && <div className="menu-detail-con">
                  {
                    cjList.map((v, i) => (
                      <div className="cell">
                      <div className="title">{v.name}</div>
                      <div className="con" style={{ width: 102 * 2 + 'px'}}>
                      {
                        v.data.map((item) => (
                          <span onClick={() => this.chooseCj(item)} className={ item.id == cjval ? 'active-cj' : ''}>{item.name}</span>
                        ))
                      }
                      </div>
                    </div>
                    ))
                  }
              </div>
              }
              {
                activeMenu == 2 && <div className="menu-detail-con1">
                  {
                    hyList.map((item) => (
                      <div className={ item.id == hyval ? 'cell1 active-cell' : 'cell1'} onClick={() => this.chooseHy(item)}>{item.name}</div>
                    ))
                  }
                </div>
              }
            </div>
          </div>
        </div>
        
        <div className="main" style={{ display: selectMenu == 0 || selectMenu == 1 || selectMenu == 2 ? 'block' : 'none' }}>
          {
            demoList.length == 0 && isShowImg ? <div><img className="nodata" src={require('../imgs/nodata.png')} /></div> : ''
          }
          <div className="content">
          {
            demoList.map((v, i) => (
              <div className="demo-cell">
                <div >
                  <div className="cell-top" onClick={ (e) => this.leadTo(v) }>
                    <div>
                      <img src={require('../imgs/eye.png')} />
                      <span>{v.visitcount}</span>
                    </div>
                    <p className="xq-con">
                      <img className="xqimg" src={require('../imgs/ckxq.png')} />
                    </p>
                    <img style={{ width: '276px', height: '105px', maxWidth: '100%' }} src={v.bjtp} />
                  </div>
                  <div style={{ paddingLeft: '18px',paddingRight: '15px' }}>
                    <div className="cell-title">{v.demoname}</div>
                  </div>
                  <div style={{ paddingLeft: '15px',paddingRight: '15px' }}>
                    <div className="bq-container">
                    {
                      v.bqList.map((i, index) => (
                        <span className={`${v.demotype == '5' ? 'pocbq' : 'bq'}`}>{i}</span>
                      ))
                    }
                    </div>
                  </div>
                  <div className={`czxl czxl${i}`} style={{ height: '81px', overflow:'hidden', margin: '0 15px 0 18px'}}>
                      {
                        v.demogy ? <div className="cell-desc">{v.demogy}</div> : ''
                      }
                    {
                      v.demotype == '5' ? 
                      <div className="cell-bottom1">
                        <div onClick={ (e) => this.openNewUrl(e, v.yzysqdz, v) }>云资源申请</div>
                      </div> : 
                      <div className="cell-bottom">
                        {
                          v.e10sffb && v.sffb ? <Popover placement="top" overlayClassName="zatypopver" getPopupContainer={() => document.querySelector(`.czxl${i}`)} onVisibleChange={() => this.changePopver()} content={(<div>
                            <p onClick={ (e) => this.opentyUrl1(e, v.zxtydz, v, 1) } style={{ textAlign: 'center', fontSize: '12px', fontWeight: 400, color: '#333333', lineHeight: '22px', cursor: 'pointer' }}>e9体验&nbsp;&nbsp;</p>
                            <div style={{ width: '100%', height: '1px', margin: '4px 0', background: '#999999', opacity: 0.3 }}></div>
                            <p onClick={ (e) => this.opentyUrl1(e, v.zxtydz, v, 2) } style={{ textAlign: 'center', fontSize: '12px', fontWeight: 400, color: '#333333', lineHeight: '22px', cursor: 'pointer' }}>e10体验</p>
                          </div>)} trigger="hover">
                          <div >{v.id == '127' ? '客户体验' : '在线体验'}
                            <svg style={{ marginLeft: '24px' }} t="1689043213362" class="icon svg" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9230" width="12" height="12"><path d="M192 384l320 384 320-384H192z" fill="#3d599e" p-id="9231"></path></svg>
                            <svg style={{ marginLeft: '24px', display: 'none' }} t="1689043249228" class="icon activesvg" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9649" width="12" height="12"><path d="M512 256l-320 384h640L512 256z" fill="#ffffff" p-id="9650"></path></svg>
                          </div>
                        </Popover> : <div onClick={ (e) => this.opentyUrl(e, v.zxtydz, v) }>{v.id == '127' ? '客户体验' : '在线体验'}</div>
                        }
                        
                        {
                          v.yzysqdz ? <div onClick={ (e) => this.openNewUrl(e, v.yzysqdz, v) }>云资源申请</div> : ''
                        }

                        {
                          v.id == '127' ? <div onClick={ (e) => this.openqll() }>演示工具</div> : ''
                        }
                      </div>
                    }
                  </div>
                </div>
              </div>
            ))
          }
          </div>
        </div>

        
        <div className="xj2024" style={{ display: selectMenu == 3 ? 'block' : 'none' , backgroundImage: 'url(' + require('../imgs/pocbg.png') + ')', backgroundRepeat: 'no-repeat', backgroundSize: '100% auto', backgroundColor: 'rgba(241, 243, 251, 1)', paddingBottom: '10px' }}>
          <div className="main main-poc" >
            <div className="sqs">
              <div className="sqs-detail">
                <div>我的申请数</div>
                <div>
                  <span>{ category1 }</span>
                  <span>个</span>
                </div>
                <div>本月申请云资源数：{category2}个</div>
              </div>
              <div className="sqs-num">
                <div>
                  <img src={require('../imgs/zys.png')} />
                  <div>
                    <div>{category3}</div>
                    <div>在用数</div>
                  </div>
                </div>
                <div>
                  <img src={require('../imgs/jjsf.png')} />
                  <div>
                    <div style={{ color: 'rgba(211, 41, 41, 1)' }}>{category5}</div>
                    <div>即将释放</div>
                  </div>
                </div>
              </div>
            </div>
            <div className="yzys">
              <div className="yzys-detail">
                <div>当前在用云资源数</div>
                <div>
                  <span>{category6 + 30}</span>
                  <span>个</span>
                </div>
              </div>
              <div className="xq">
                {
                  applyList.map((v) => {
                    return (
                      <div className="cell">{v.sqrq} {v.sqr}已申请云资源：{v.demolxmc}</div>
                    )
                  })
                }
              </div>
            </div>
          </div>
          <div className="main main-poc-detail">
            <div className="main-poc-detail-top">
              <div className="name">我的云资源</div>
              <div onClick={() => this.chooseYzyType('')} className={`${showYzyType == '' ? 'active-yzy-tab title' : 'title'}` }>全部</div>
              <div onClick={() => this.chooseYzyType('1')} className={`${showYzyType == '1' ? 'active-yzy-tab title' : 'title'}` }>正在使用 ({category3})</div>
              <div onClick={() => this.chooseYzyType('2')} className={`${showYzyType == '2' ? 'active-yzy-tab title' : 'title'}` }>已到期 ({category4})</div>
              <div onClick={() => this.chooseYzyType('3')} className={`${showYzyType == '3' ? 'active-yzy-tab title' : 'title'}` }>即将释放 <span style={{ color: 'rgba(211, 41, 41, 1)' }}>({category5})</span></div>
            </div>
            <div className="main-poc-detail-main">
              {
                yzyxqList.length == 0 ? <div className="nodatayzy"><img src={require('../imgs/yzynodata.png')} /></div> : ''
              }
              {
                yzyxqList.map((v) => (
                  <div className={`cell cell${v.type}`}>
                    <div className="cell-top">
                      <div className="type">{typeList[v.type]}</div>
                      <div className="date">
                        <i className="icon-coms-Delayed" />
                        <span>{v.ktqssj}~{v.ktjssj}</span>
                      </div>
                    </div>
                    <div className="cell-main">
                      <div>
                        <img src={v.bjtp} />
                        <div style={{ background: 'rgba(153, 153, 153, 0.6)' }}></div>
                      </div>
                      
                      <div>
                        <div className="bm">{v.xgkh}</div>
                        <div className="bm1">
                          <div className="bq">{v.demolxmc}</div>
                          <div className="js">
                            申请人：{v.sqr}
                          </div>
                          <div className="js">
                            所属部门：{v.sqrbm}
                          </div>
                        </div>
                        <div className="fy">
                          累计成本：
                          <span style={{ fontWeight: 600, fontSize: '18px', color: 'rgba(211, 41, 41, 1)' }}>{v.total}</span>
                        </div>
                      </div>
                      <div className="btns">
                      {
                          v.type == 1 && v.demodz ? <div onClick={() => window.open(v.demodz)} className="firstbtn">进入系统</div> : ''
                        }
                        {
                          v.type != 4 ? <div onClick={() => window.open(v.xfdz)} className="firstbtn">续费申请</div> : ''
                        }
                        <div className="secbtn" onClick={() => this.poczc()}>POC支持</div>
                      </div>
                    </div>
                  </div>
                ))
              }
            </div>
            {
              yzyxqList.length > 0 ? <div className="page-fy">
                <Pagination onChange={(i) => this.onPageChange(i)} total={iTotal} current={currentPage} />
              </div> : ''
            }
            
            
          </div>
        </div>
        
        <WeaDialog
          onCancel={() => this.setState({ visible: false })}
          visible={visible}
          maskClosable={true}
          style={{ width: 1500, height: 800 }}
          hasScroll
          url="https://www.e-cology.com.cn/spa/develop/static/index.html#/main/develop/demo/demoListPersonal"
        />
      </div>
    )
  }
}

export default TabDemo;